<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
  <base href="<%=basePath%>">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="apple-mobile-web-app-capable" content="no" />
  <meta name="format-detection" content="telephone=no">
  <title></title>
  <script src="static/js/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet">


</head>
<!-- ${goodsDetail.title} -->
<body class="body-detail">
<input type="hidden" id="refreshed" value="no">
<script type="text/javascript">
    var e=document.getElementById("refreshed");  
    if(e.value=="no")e.value="yes";  
    else{e.value="no";location.reload();}
</script>
 <header class="header">
    <div class="header-bg"></div>
    <div class="titlet-bar white">
      <a class="btn-goback dib" click="onGoBack"></a>
      <div class="title ell"></div>
    </div>
  </header>
  <div class="content content-detail ovh">
    <div class="goods-main mod-goods">
      <div class="wrapper">
        <div class="maxw goods-banner f0">
          <img class="abs" src="${img}" width="100%" alt="">
          
          <div class="rel z2">
            <dl class="white p20 ml20 mr20 mt10">
              <dt class="laber-period f22 tc">第${goodsDetail.time }期</dt>
              <dd class="goods-title f32"><span class="js-goods-title">${goodsDetail.title}</span></dd>
              <dd class="f0 mt20">
                <i class="dib vm icon-map mr20"></i>
                <span class="dib vm f26 ">${goodsDetail.baseName }</span>
              </dd>
            </dl>
            <div class="p20 mt20"></div>
            <div class="progress-bar p20">
              <div class="bar f0">
                <span class="dib" style="width:${goodsDetail.saleNum*100/(goodsDetail.stockNum +goodsDetail.saleNum)}%"></span>
              </div>
              <div class="cell white pt20">
                <div class="cell-bd f0">
                  <span class="f26">已认养</span>
                  <em class="f26 gf9953c">${goodsDetail.saleNum }</em>
                  <span class="f26">${goodsDetail.unitDesc }</span>
                </div>
                <div class="cell-fd pr0 f0">
                  <span class="f26">剩余</span>
                  <em class="f26 gf9953c">${goodsDetail.stockNum }</em>
                  <span class="f26">${goodsDetail.unitDesc }可认养</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 价格 -->
        <div class="mod-price cell">
          <div class="cell-hd tc">
            <div class="f0">
              <i class="dib vm icon-reward--01 mr10"></i>
              <span class="dib vm f26 g9">预计年产量(棵)</span>
            </div>
            <p class="f38 gf9953c">
              <em class="js-weight-average">${goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }</p>
          </div>
          <div class="cell-bd tc">
            <div class="dib tl">
              <p class="f0">
                <span class="f28 g9">认养周期：</span>
                <span class="f30">${goodsDetail.equityCycle }个月</span>
              </p>
              <p class="f0">
                <span class="f28 g9">认养单价：</span>
                <span class="f30">￥
                  <em class="js-price">${goodsDetail.price }</em>
                </span>
              </p>
            </div>
          </div>
        </div>

        <div class="bgwh ge3 ui-1px-t ui-1px-b pt20 pb20 rurchase-quantity">
          <div class="f0 g6 pt10 pb10 tc">
            <i class="dib vm icon-reward--02"></i>
            <div class="dib vm pl20">
              <span class="f28">认养</span>
              <em class="f28 gf9953c js-number">${goodsDetail.minShopNum }</em>
              <span class="f28">${goodsDetail.unitDesc }，一年内收果约</span>
              <span class="f28 gf9953c">
                <em class="js-weight">${goodsDetail.minShopNum * goodsDetail.expectHarvest }</em>${goodsDetail.harvestUnitDesc }</span>
            </div>
          </div>
          <div class="m20 cell quantity">
            <div class="cell-bd f0">
              <span class="f30 g6">认养数量：</span>
              <span class="f26 text-warning tips-number dn">*单笔最多购买${goodsDetail.maxShopNum }棵</span>
            </div>
            <div class="cell-fd p0">
               <div class="mod-number g3">
              <input type="hidden" id="submitToken" value="${submitToken }">
                <span class="btn-number number-decrease ion-ios-minus-empty f40"></span>
                <input class="number-input tc number-form" type="tel" min="${goodsDetail.minShopNum }" max="${goodsDetail.maxShopNum }" value="${goodsDetail.minShopNum }">
                <span class="btn-number number-increase ion-ios-plus-empty f40"></span>
              </div>
            </div>
          </div>
        </div>
        
        <dl class="mt20 p20 bgwh ui-1px-t ui-1px-b ge3 income-rules">
          <dt class="f28 g9 mb10">产品收益详情：</dt>
          <dd class="cell pt20 mt20">
            <div class="cell-bd tc">
              <i class="icon-01 dib"></i>
              <p class="f24 g6">今日认养</p>
              <p class="f22 g30bf6c">${goodsDetail.todayDate }</p>
            </div>
            <div class="cell-bd tc">
              <p class="f24 g3">生长期</p>
              <div class="transition-period"></div>
            </div>
            <div class="cell-bd tc">
              <i class="icon-02 dib"></i>
              <p class="f24 g6">开始收益</p>
              <p class="f22 g30bf6c">${gsth.expectHarvestTime }</p>
            </div>
            <div class="cell-bd tc">
              <p class="f24 g3">收果期</p>
              <div class="transition-period"></div>
            </div>
            <div class="cell-bd tc">
              <i class="icon-03 dib"></i>
              <p class="f24 g6">收益到期</p>
              <p class="f22 g30bf6c">${goodsDetail.endUseTime }</p>
            </div>
          </dd>
          <dd class="g6 f24 tc m10 pt20">(万果田园为您提供水果寄回服务)</dd>
        </dl>

        <div class="mt20 bgwh ui-1px-t ui-1px-b ge3 p20">
          <div class="f0 pt10 pb10">
            <span class="g6 f30">认养截止日期：</span>
            <span class="g3 f30">${goodsDetail.endTime }</span>
          </div>
        </div>
        <div class="mt20 bgwh ui-1px-t ui-1px-b ge3 pt20 pb20 pr20">
          <div class="cell pt20 pb20">
            <div class="cell-hd g6 f28" style="align-self: flex-start;">认养须知：</div>
            <div class="cell-bd f26 g3 pl20 pr20">请在果实采摘15天前填写具体的收货地址，以及果实的邮寄数量。
              <!-- <em style="color: #3ca2f9;"></em> -->
            </div>
          </div>
        </div>
        <!-- tips -->
        <div class="tips-more js-tips tc">
          <span class="js-icon dib vm ion-chevron-down ion-chevron-up g9"></span>
          <span class="tips-more__text g0 f24 dib vm">上拉查看图文详情</span>
        </div>

      </div>
    </div>
    <div class="detail-main mod-detail bgwh ui-1px-t ge3">
      <div class="wrapper photo100 g3">
      		${goodsDetail.content }
      </div>
    </div>
  </div>
  <div class="column-buy">
    <div class="cell">
      <div class="cell-hd"></div>
      <div class="cell-bd tl">
        <span class="f0 money pr20">
          <em class="dib vm f26 g6">结算：</em><span class="dib vm f28">￥</span>
          <em class="dib vm js-money b f34"></em>
        </span>
      </div>
      <div class="cell-fd">
        <a class="btn-buy f34  white js-buy" href="<%=basePath%>wap/pay/submitOrder?goodsSpecTimeId=${goodsDetail.id}&goodsTimeId=${goodsTimeId}">立即认养</a>
      </div>
    </div>
  </div>
  <!-- 库存为0则说明 此商品不能再购买 -->
  <input type="hidden" id = "stockNum" value="${goodsDetail.stockNum }">
  <!-- 售馨状态 00 售馨 01 售卖中 （状态等于00的时候 商品不能再购买）-->
  <input type="hidden" id = "saleType" value="${goodsDetail.saleType }">
  <!-- 状态(00下架01上架) -->
  <input type="hidden" id = "state" value="${goodsDetail.state }">
  
  <link href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
  <script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
  <script src="static/js/layer_mobile/layer.js"></script>
  <script type="text/javascript" src="static/js/app.js"></script>
  <script type="text/javascript" src="static/js/details.js"></script>
  <script>
  	var btn = document.querySelector('.js-buy')
  	var money = document.querySelector('.js-money')
  	var number = document.querySelector('.number-form')
  	var submitToken = document.querySelector('#submitToken')
  	var url = btn.href
  	btn.addEventListener('click',function(e){
  		var stockNum = document.querySelector('#stockNum')
        var saleType = document.querySelector('#saleType')
        var state = document.querySelector('#state')
        console.log(stockNum,stockNum.value.trim())
        if (stockNum && stockNum.value.trim() === '0') {
          layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
            btn.classList.add('disabled')
            setTimeout(function () {
              layer.closeAll()
            }, 2000)
          })
        } else if (saleType && saleType.value.trim() === '00') {
          layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
            btn.classList.add('disabled')
            setTimeout(function () {
              layer.closeAll()
            }, 2000)
          })
        }else if(state && saleType.value.trim() === '00'){
        	layerShow('<div><p>非常抱歉，</p><p>您查看的商品已下架~</p></div>', function () {
                btn.classList.add('disabled')
                setTimeout(function () {
                  layer.closeAll()
                }, 2000)
              })
        }else{
        	e.preventDefault()
      		if(this.classList.contains('disabled')){
      			return;
      		}
      		location.href = url+'&num='+number.value+'&totalPrice='+money.innerHTML+'&submitToken='+submitToken.value;
        }
  	})
  	
  	
  	 function layerShow(html, callback) {
      layer.open({
        shade: false,
        className: 'layer-tips',
        title: ['', 'display:none'],
        content: html,
        success: function (index) {
          (callback && typeof (callback) === "function") && callback(index);
        }
      });
    }
    /* window.addEventListener('DOMContentLoaded', function () {
      var stockNum = document.querySelector('#stockNum')
      var saleType = document.querySelector('#saleType')
      console.log(stockNum,stockNum.value.trim())
      if (stockNum && stockNum.value.trim() === '0') {
        layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
          btn.classList.add('disabled')
          setTimeout(function () {
            layer.closeAll()
          }, 2000)
        })
      } else if (saleType && saleType.value.trim() === '00') {
        layerShow('<div><p>非常抱歉，</p><p>您查看的商品已售罄~</p></div>', function () {
          btn.classList.add('disabled')
          setTimeout(function () {
            layer.closeAll()
          }, 2000)
        })
      }
    }) */	  	
  </script>
</body>

</html>